<template>
<div class="user-container">
  <div class="user-bg">
  </div>
  <div class="user-main">
    <header-box :name="'个人中心'"></header-box>

    <div class="user-img clearfix">
      <div class="img-box">
        <img src="../../assets/images/user.jpg" alt="">
      </div>
      <p>做一个吃货无忧无虑，当一个痴货无牵无挂。对于吃货而言，没有什么事情是碗救不了的…</p>
    </div>
    <ul class="user-text wid">
      <li>
        <h5>关注</h5>
        <p>120</p>
      </li>
      <li>
        <h5>点赞</h5>
        <p>521</p>
      </li>
      <li>
        <h5>粉丝</h5>
        <p>1314 </p>
      </li>
    </ul>
    <ul class="user-icon wid">
      <li>
        <img src="../../assets/images/user-icon1.jpg" alt="" srcset="">
        <p>足迹</p>
      </li>
      <li>
        <img src="../../assets/images/user-icon2.jpg" alt="" srcset="">
        <p>菜单</p>
      </li>
      <li>
        <img src="../../assets/images/user-icon3.jpg" alt="" srcset="">
        <p>消息</p>
      </li>
      <li>
        <img src="../../assets/images/user-icon4.jpg" alt="" srcset="">
        <p>设置</p>
      </li>
    </ul>

  
    <ul class="hot-container wid">
   
      <li v-for="item in  cartlist" :key="item.id" @click="goArticle(item.id)">
        <div class="img-box">
          <img :src="item.albums[0]" alt="">
        </div>
        <h4>{{item.title}}</h4>
        <p>
          <span>
            <i class="iconfont icondengji"></i>
            {{item.tags}}
          </span>
          <span>
            点击<b>{{item.id}}</b>次
          </span>
        </p>
      </li>

    </ul>
      <div class="cancellation wid">
      <van-button type="danger" size="large" @click="cance()">注销登录</van-button>
    </div>
  </div>

  </div>
</template>

<script>

  import Header from "../../components/tabbar/Header.vue"

  export default {
    data() {
      return {
        cartlist: [],
      }
    },
    created() {
      this.Getlist();
    },
    methods:{
      Getlist(){
             this.$http.get("json/cart/cart-list.json").then(result => {
          if (result.body.resultcode == 200) {
            this.cartlist = this.cartlist.concat(result.body.result.data.slice(0,4))
              for (var i = 0; i < this.cartlist.length; i++) {
              this.cartlist[i].tags = this.cartlist[i].tags.slice(0, 5)+'...'
            }
          } else {
            Toast("数据加载失败");
          }
        });
      },
        goArticle(id){
        this.$router.push('/cart/article/'+id)
      },
      cance(){
        this.$router.push('/login')
      }
    },
    components: {
      "header-box": Header
    }

  }

</script>

<style lang="scss">

</style>
